<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>OnShelves List</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" th:href="@{/css/font.css}">
<link rel="stylesheet" th:href="@{/css/xadmin.css}">
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/js/xadmin.js}"></script>
</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a> <cite>商品上架信息管理</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">

					<div class="layui-card-header">
						<button class="layui-btn layui-btn-danger" onclick="delAll()">
							<i class="layui-icon"></i>批量删除
						</button>
						<button class="layui-btn"
							onclick="xadmin.open('添加商品上架信息','/addOnShelves',550,600,false)">
							<i class="layui-icon"></i>添加
						</button>
					</div>
					<div class="layui-card-body ">
						<table class="layui-table layui-form" lay-filter="table"
							id="onShelves">
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script>
    layui.use([ 'form', 'layer', 'table' ], function() {
        const table = layui.table, form = layui.form, $ = layui.$;
        //执行一个laydate实例
        table.render({
            elem : '#onShelves', //指定元素
            url : '/onShelves/list',
            toolbar: '#toolbarDemo',
            totalRow: true,
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                ,groups: 1 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
            },
            cols : [ [ //表头
                {type:'checkbox'},
                {field : 'onShelvesNo', title : '上架编号', width : 220, sort : true},
				{field: 'goodsNo', title: '商品编号', width: 120,templet:'<div>{{d.goods.goodsNo}}</div>'},
                {field : 'onShelvesTime', title : '上架日期', width : 250, templet: '#date_time'},
                {field : 'onShelvesAmount', title : '上架数量', width : 220, sort : true},
                {fixed: 'right', title:'操作', toolbar: '#barDemo', width:200}] ]
        });

        //工具栏事件
        table.on('toolbar(table)', function(obj){
            let checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + '个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选')
                    break;
            }
        });

        //监听行工具事件
        table.on('tool(table)', function(obj){
            var data = obj.data;
            console.log(obj.data)
            switch (obj.event) {
                case 'edit':
                    xadmin.open('修改商品上架信息','/onShelves/edit_page?onShelvesNo='+obj.data.onShelvesNo,550,400,false)
                    break;
                case 'del':
                    layer.confirm('真的删除该数据吗?', function(index){
                        $.ajax({
                            url: '/onShelves/delete?onShelvesNo='+obj.data.onShelvesNo,
                            type: 'post',
                            success: function (res) {
                                if (res.code === 0) {
                                    //弹出提示，并在1秒后进行跳转
                                    layer.alert("删除成功", {
                                        icon : 6
                                    }, function() {
                                        obj.del();
                                        layer.close(index);
                                        location.reload();
                                        return false;
                                    });
                                } else {
                                    layer.msg("删除失败:" + res.msg);
                                    return false;
                                }
                            }
                        })
                    });
                    break;
            }
        });
    });
</script>

	<script type="text/html" id="date_time">
		<div>{{layui.util.toDateString(d.onShelvesTime, 'yyyy-MM-dd HH:mm:ss')}}</div>
	</script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

</body>
</html>